<template>
  <div class="account-container">
    <a-card class="box-card">
      <template #title>
        <span>用户注册</span>
      </template>

      <!-- 注册表单 -->
      <a-form :model="accountForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item :wrapper-col="{ offset: 6 }">
          <a-button type="primary" @click="registerAccount">注册用户</a-button>
        </a-form-item>
      </a-form>

      <!-- 显示账户信息 -->
      <div v-if="accountInfo">
        <h3>账户信息</h3>
        <p>地址：{{ accountInfo.address }}</p>
        <p>私钥：{{ accountInfo.privateKey }}</p>
        <p>公钥：{{ accountInfo.publicKey }}</p>
      </div>

    </a-card>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import axios from 'axios'

export default {
  name: 'AccountRegister',
  data() {
    return {
      accountForm: {},
      accountInfo: null
    }
  },
  methods: {
    async registerAccount() {
      try {
        const response = await axios.post('/api/account/register')
        this.accountInfo = response.data
        message.success('用户注册成功')
      } catch (error) {
        message.error('用户注册失败：' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.account-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
</style>